<div class="panel panel-default">
	<div class="panel-heading">{{('channel.manange.heading' | translate) || '渠道信息'}}</div>
	<div class="panel-body">
		<p-dataTable #dt [value]="customers" [editable]="false" [rows]="10"
			[paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]"
			[resizableColumns]="true" reorderableColumns="true" [lazy]="true"
			[totalRecords]="totalRecords" (onLazyLoad)="loadLazy($event)"
			[(selection)]="selectedChannel" (onRowSelect)="onRowSelect($event)">
		    <p-header>
		        <div class="ui-helper-clearfix">
		            <div class="row">
		            	<div class="col-lg-1">
		            		<button type="button" class="ui-button-secondary" pButton label="{{('channel.manange.dt.add' | translate) || '添加'}}" (click)="addChannel()" style="float:left"></button>		
		            	</div>
		            	<div class="col-lg-1">
							<button type="button" class="ui-button-secondary" pButton label="{{('channel.manange.dt.edit' | translate) || '编辑'}}" (click)="editChannel()" style="float:left"></button>		            	
		            	</div>
		            	<div class="col-lg-1">
		            		<button type="button" class="ui-button-secondary" pButton label="{{('channel.manange.dt.quato' | translate) || '配额'}}" [disabled]="true" (click)="quato()" style="float:left"></button>
		            	</div>
		            
		        	</div>
		        </div>	        		        		        		        
		    </p-header>			
			<p-column [style]="{'width':'38px','display': 'table-cell'}" selectionMode="single"></p-column>			
			<p-column field="chnlId" header="{{('channel.chnlId' | translate) || '渠道编号'}}" [editable]="false" [hidden]="true"></p-column> 
			<p-column field="chnlName" [editable]="false"
				[style]="{'width':'20%','text-align': 'center', 'white-space': 'normal','word-wrap': 'break-word','word-break': 'break-all'}">
		        <ng-template pTemplate="header">
          			{{('channel.chnlName' | translate) || '渠道名称'}}
      			</ng-template>
		       <ng-template let-col let-chnl="rowData" pTemplate="body">
		            <a [style.color]="Blue" (click)="userManage(chnl)"><span class="channel-name">{{chnl[col.field]}}</span></a>
		        </ng-template> 			
			</p-column> 
			<p-column field="chnlTypeName" header="{{('channel.chnlType' | translate) || '渠道类型'}}" [editable]="false" 
				[style]="{'width':'10%','text-align': 'center','white-space': 'normal','word-wrap': 'break-word','word-break': 'break-all'}"></p-column> 
			<p-column field="contact" header="{{('channel.manage.dt.contactName' | translate) || '联系人名称'}}" [editable]="false"
				[style]="{'width':'10%','text-align': 'center','white-space': 'normal','word-wrap': 'break-word','word-break': 'break-all'}"></p-column>
			<p-column field="phone" header="{{('channel.manage.dt.contactPhone' | translate) || '联系人电话'}}" [editable]="false"
				[style]="{'width':'15%','text-align': 'center'}"></p-column>
			<p-column field="address" [editable]="false" [style]="{'width':'40%','white-space': 'normal','word-wrap': 'break-word','word-break': 'break-all'}">
		        <ng-template pTemplate="header">
          			{{('channel.manage.dt.address' | translate) || '渠道地址'}}
      			</ng-template>
		       <ng-template let-col let-chnl="rowData" pTemplate="body">
		            <span>{{chnl['provinceName'] + chnl['areaName'] + chnl[col.field]}}</span>
		        </ng-template>      			
			</p-column>
		</p-dataTable>
	</div>
</div>